<template>
	<!-- 新闻资讯详情 -->
	<view class="page">
		<view class="page-main">
			<view class="main-title">
				<b>{{newsList.title}}</b>
			</view>
			<view  class="main-content" id="memo">
				<p html :style="{  fontSize: pvalue + 'upx' }"  v-html="htmlNodes"></p>
			</view>
			<view class="main-see">
				<text>{{newsList.point}}人预览</text>
			</view>
			<view class="fen-title">
				<text>———分享到———</text>
			</view>
			<view class="fenxiang">
				<view class="fenxiang-first" @click="weixin">
					<image src="@/static/img/wechat.png"></image>
				</view>
				<view @click="firends">
					<image src="@/static/img/wechat2.png"></image>
				</view>
				<view @click="gotosinaweibo">
					<image src="@/static/img/Weibo.png" ></image>
				</view>
				
			</view>
		</view>
		
		<view class="fab" style="bottom: 20%;" @click="addfont">
		    <view class="fab__icon"></view>
		    <view class="fab__text">
		     字体放大
		    </view>
		</view>
		<view class="fab"  @click="defont">
		    <view class="fab__text">
		   — 字体缩小
		    </view>
		</view>
	</view>
</template>

<script>
	import { secondmainNewsDetail } from '@/service/getData.js';
    import { mapState, mapMutations } from 'vuex';
	import { router, toast, localStorage, dateUtils } from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
        components:{
			uniLoadMore
        },
		data() {
			return {
               newsList: [],
			   id: null ,
			   htmlNodes: [],
			   pvalue: 30,
			};
		},
        computed: mapState(['hasLogin', 'screenTemp']),
        onLoad(option) {
			this.id = option.id;
            this.getnews();
        },
		// onPullDownRefresh() { // 下拉刷新
  //           this.getnews();
		// },
  //       onReachBottom() { // 上拉触底
  //           this.getnews('ReachBottom');
  //       },
		methods: {
            ...mapMutations(['GOPAGE_LOGIN', 'SCREEN_TEMP']),

			getnews(){
				let sent ={"type":"newsinfo","id":this.id };
				 console.log("输出："+JSON.stringify(sent));
				secondmainNewsDetail({data:sent}).then(res => {
					let news = eval('('+res.data+')');  
					this.newsList = news[0].meslist[0];
					this.htmlNodes = this.newsList.memo;
					this.htmlNodes=this.htmlNodes.replace(/&lt;/g,'<');
					this.htmlNodes=this.htmlNodes.replace(/&gt;/g,'>');
					console.log("接收数据123"+JSON.stringify(this.htmlNodes));
				})
			},
			weixin(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: "uni-app分享",
					summary: this.newsList.title,
					imageUrl: "@/static/img/right.png",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			firends(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 1,
				    summary: this.newsList.title,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			gotosinaweibo(){
				uni.share({
				    provider: "sinaweibo",
				    scene: "WXSenceTimeline",
				    type: 1,
				    summary: this.newsList.title,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			addfont(){
				this.pvalue = this.pvalue + 2;
			},
			defont(){
				if(this.pvalue >2){
					this.pvalue = this.pvalue - 2;
				}
			}
			
        }
	}
</script>

<style lang="scss">
	@import '@/style/mixin/flex.scss';
	@import '@/style/mixin/hr.scss';
	@import '@/style/page/banner.scss';
	.page{
		margin: 0;
		padding: 30upx 20upx;
		background-color: #ffffff;
		.page-main{
			margin: auto;
			text-align: center;
			.main-title{
				font-size: 36upx;
				color: #000000;
			}
			.main-content{
				font-size: 28upx;
				margin: 10upx 0;
				.text-box{
					font-size: 50upx;
				}
			}
			.main-see{
				text-align: center;
				margin: 100upx 0 40upx 0;
				text{
					background-color: #ff0000;
					color: #ffffff;
					padding: 15upx 80upx;
					border-radius: 10upx;
					font-size: 28upx;
				}
			}
			.fen-title{
				font-size: 26upx;
				color: #a5a5a5;
			}
			.fenxiang{
				display:flex;
				flex-direction: row;
				margin-top: 30upx;
				view{
					margin: 0 10upx;
				}
				.fenxiang-first{
					margin-left: 35%;
				}
				image{
					width: 60upx;
					height: 60upx;
				}
			}
		}
		.fab{
		    @include flex(center, center);
		    position: fixed;
		    bottom: 10%;
		    right: 0;
		    z-index: 10;
		    height: 34px;
		    box-sizing: border-box;
		    padding: 0 $uni-spacing-row-base 0 17px;
		    background-color: #3c81df;
		    border-radius: 17px 0 0 17px;
		    
		    &__icon{
		        position: relative;
		        width: 12px;
		        height: 12px;
		        margin: 0 $uni-spacing-col-sm 0 0;
		            
		        &::before, &::after{
		            content: " ";
		            position: absolute;
		            top: 50%;
		            left: 50%;
		            -webkit-transform: translate(-50%, -50%);
		            transform: translate(-50%, -50%);
		            background-color: #fff;
		            border-radius: 1rpx;
		        }
		        
		        &::before {
		        	width: 4rpx;
		        	height: 100%;
		        }
		        
		        &::after {
		        	width: 100%;
		        	height: 4rpx;
		        }
		    }
		    
		    &__text{
		        font-size: 13px;
		        color: #fff;
		    }
		}
	}
	

</style>
